<template>
  <div>
    <!-- <h1>   - - - - - - - 我是天气查询页面- - - - - - -  </h1> -->

    <input type="text" v-model="city" @keyup.enter="getWeather" placeholder="请输入要查询天气的城市">

    <div class="weather_title">
      <h3>当前查询的城市为：{{address}}</h3>
      <h3>当前城市邮编为：{{cityCode}}</h3>
    </div>

    <div class="weather_box" v-for="item in weather_forecast" :key="item.date">
      <p>
        <span>{{item.date}}</span>
        <span>星期：{{item.dayOfWeek}}</span>
      </p>
      <h3>白 天：</h3>
      <p>
        <span>天气：{{item.dayWeather}}</span>
        <span>温度：{{item.dayTemp}}</span>
      </p>
      <p>
        <span>方向：{{item.dayWindDirection}}</span>
        <span>风力：{{item.dayWindPower}}</span>
      </p>

      <h3>夜 晚：</h3>
      <p>
        <span>天气：{{item.nightWeather}}</span>
        <span>温度：{{item.nightTemp}}</span>
      </p>
      <p>
        <span>方向：{{item.nightWindDirection}}</span>
        <span>风力：{{item.nightWindPower}}</span>
      </p>

    </div>


  </div>
</template>


<script>

export default {
  data() {
    return {
      city:'上海',
      address:'',
      cityCode:'',
      weather_forecast:[]
    };
  },
  methods: {

    getWeather(){
      let _this  = this
      if(_this.city!=''){
        _this.$axios.get('/weather/forecast/'+_this.city+'市').then(res=>{
        console.log(res.data.data)
        _this.address = res.data.data.address
        _this.cityCode = res.data.data.cityCode
        _this.weather_forecast = res.data.data.forecasts
        _this.city = ''
      })
      }else{
        _this.$toast('请输入要查询的城市名称～～～')
      }
      
    }

  },
  created(){
    this.getWeather()
  }
};

</script>

<style lang="less" scoped>

  div{

    color: #444;
    font-weight: 300;

    input[type=text]{
    width: 90%;
    line-height: 35px;
    border-radius: 15px;
    margin: 20px auto;
    display: block;
    font-size: 15px;
    text-indent: 6px;
    font-weight: 300;
    text-align: center;
  }
  h3{
      font-size: 15px;
      font-weight: 500;
      margin: 6px 0;
    }

  .weather_title,.weather_box{
    width: 85%;
    margin: 10px auto;
    font-size: 14px;
    border-radius: 15px;
    background-color: #f5f5f5;
    padding: 8px 12px;
    line-height: 1;
  }

  .weather_box{
    p{
      font-size: 13px;
      margin: 4px 0;
      display: flex;
      span{
        flex: 1;
      }
    }
  }

  }

  


</style>
